<template>
  <div>
    <!-- 资金流水页 -->
    <div class="top">
      <el-row :gutter="6">
        <el-col :span="22">
          <el-form ref="form"
                   :model="mytime">
            <el-form-item label="投标时间筛选">
              <el-col :span="6">
                <el-date-picker type="datetime"
                                placeholder="开始时间"
                                v-model="mytime.startTime"
                                style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col :span="6">
                <el-date-picker type="datetime"
                                placeholder="结束时间"
                                v-model="mytime.endTime"
                                style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col :span="8">
                <el-button type="primary"
                           size="small"
                           @click="screening">搜索</el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary"
                           size="small"
                           @click="dialogFormVisible = true">添加</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>

      </el-row>

    </div>
    <div class="bottom">
      <MyFome :mylist="mylist"
              :list="list"
              @del="del"
              @editor='editor'></MyFome>

    </div>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handlePageChange"
                   :current-page="page"
                   :page-sizes="[2,5,10]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 添加的模态框 -->
    <el-dialog title="添加"
               :visible.sync="dialogFormVisible">
      <el-form 
               ref="form"
               :model="arr"
               :rules="rules">
        <el-form-item 
        :label-width="formLabelWidth"
                      label=" 收支类型">
          <el-select v-model="arr.type"
                     placeholder="请选择收支类型">
            <el-option label="提现"
                       value="提现"></el-option>
            <el-option label="提现手续费"
                       value="提现手续费"></el-option>
            <el-option label="充值"
                       value="充值"></el-option>
            <el-option label="优惠券"
                       value="优惠券"></el-option>
            <el-option label="充值礼券"
                       value="充值礼券"></el-option>
            <el-option label="转账"
                       value="转账"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支描述"
        :label-width="formLabelWidth"
                      prop="describe">
          <el-input class="ipt"
                    v-model="arr.describe"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收  入"
        :label-width="formLabelWidth"
                      prop="income">
          <el-input class="ipt"
                    v-model="arr.income"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支  出"
        :label-width="formLabelWidth"
                      prop="expend">
          <el-input class="ipt"
                    v-model="arr.expend"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账户现金"
        :label-width="formLabelWidth"
                      prop="cash">
          <el-input class="ipt"
                    v-model="arr.cash"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注"
        :label-width="formLabelWidth">
          <el-input class="ipt"
                    type="textarea"
                    v-model="arr.remark"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑的模态框 -->
    <el-dialog title="编辑"
               :visible.sync="dialogFormVisible1">
      <el-form 
      :label-position="labelPosition"
               ref="form1"
               :model="brr"
               :rules="rules">
        <el-form-item 
        :label-width="formLabelWidth"
                      label=" 收支类型">
          <el-select v-model="brr.type"
                     placeholder="请选择收支类型">
            <el-option label="提现"
                       value="提现"></el-option>
            <el-option label="提现手续费"
                       value="提现手续费"></el-option>
            <el-option label="充值"
                       value="充值"></el-option>
            <el-option label="优惠券"
                       value="优惠券"></el-option>
            <el-option label="充值礼券"
                       value="充值礼券"></el-option>
            <el-option label="转账"
                       value="转账"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支描述"
        :label-width="formLabelWidth"
                      prop="describe">
          <el-input class="ipt"
                    v-model="brr.describe"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收  入"
        :label-width="formLabelWidth"
                      prop="income">
          <el-input class="ipt"
                    v-model="brr.income"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支  出"
        :label-width="formLabelWidth"
                      prop="expend">
          <el-input class="ipt"
                    v-model="brr.expend"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账户现金"
        :label-width="formLabelWidth"
                      prop="cash">
          <el-input class="ipt"
                    v-model="brr.cash"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注"
        :label-width="formLabelWidth">
          <el-input class="ipt"
                    type="textarea"
                    v-model="brr.remark"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MyFome from '../../components/MyFome.vue'
export default {
  components: { MyFome },
  name: 'money',
  data() {
    return {
      formLabelWidth: '120px',
      // 列表数据
      list: [],
      // 添加
      arr: {},
      // 编辑
      brr: {},
      token: '',
      // 分页内容
      page: 1, //当前页
      pageSize: 5, //当前页条数
      //添加模态框显示隐藏
      dialogFormVisible: false,
      // 编辑模态框显示隐藏
      dialogFormVisible1: false,
      // 编辑获取的id
      cid:'',
      // 筛选的数据
      mytime: {
        startTime: '',
        endTime: '',
      },
      // 添加的校验
      rules: {
        describe: [
          {
            required: true,
            message: '收支描述不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        income: [
          {
            required: true,
            message: '收入不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        expend: [
          {
            required: true,
            message: '支出不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        cash: [
          {
            required: true,
            message: '账户现金不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    this.xr()
    this.token = localStorage.getItem('token')
    // console.log(this.token);
  },
  methods: {
    // 编辑
    editor(id){
      this.cid=id
      this.dialogFormVisible1=true
    },
    // 确认编辑
    update(){
      this.$refs.form1.validate(async(valid)=>{
        if(!valid){
          return this.$message({ type: 'error', message: '信息有误' })
        }
        let res = await this.$http({
          url:'/v1/vue3system/api/profiles/edit/'+this.cid,
          method: 'post',
          data:this.brr
        }).catch(err=>err)
        this.dialogFormVisible1 = false
        this.xr()
        this.$message('修改成功')

      })
    },
    // 筛选
    async screening() {
      // 定义一个变量来接收开始时间的时间戳
      let start = this.mytime.startTime.getTime()
      // 定义一个变量来接收结束时间的时间戳
      let end = this.mytime.endTime.getTime()
      // 过滤全部数据得到所有的时间
      let { data: res } = await this.$http({
        url: '/v1/vue3system/api/profiles',
      }).catch((err) => err)
      this.list = res

      this.list = this.list.filter((item) => {
        // 用一个变量接收过滤出来的数据
        var obj = new Date(item.date).getTime()
        // 将大于初始时间小于结束时间的数据返回,&&与
        return obj >= start && obj <= end
      })
      console.log(this.list)
    },
    // 渲染
    async xr() {
      let res = await this.$http({
        url: '/v1/vue3system/api/profiles',
        // method: 'get',
      }).catch((err) => err)
      this.list = res.data
      console.log(this.list)
    },
    // 添加
    add() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return this.$message({ type: 'error', message: '信息有误' })
        }
        let res = await this.$http({
          url: '/v1/vue3system/api/profiles/add',
          method: 'post',
          data: this.arr,
        }).catch((err) => err)
        console.log(res)
        this.dialogFormVisible = false
        this.xr()
        this.$message('添加成功')
      })
    },
    // 删除
    async del(id) {
      await this.$http({
        url: '/v1/vue3system/api/profiles/delete/' + id,
        method: 'delete',
      })
      this.xr()
      this.$message('删除成功')
    },
    //改变当前页条数
    handleSizeChange(size) {
      this.pageSize = size
    },
    //页码跳转
    handlePageChange(page) {
      this.page = page
    },
  },
  computed: {
    total() {
      return this.list.length
    },
    // 分页
    // 分页需要定义三个值，page当前页，pagesize每页有多少条，total总条数
    // 思路为过滤或者截取数据
    mylist() {
      return this.list.filter((item, index) => {
        // 先获取每页的第一条数据（起始数据）
        let start = (this.page - 1) * this.pageSize
        // 再获取到最后一条数据
        let end = this.page * this.pageSize
        // 然后返回包括第一条数据和最后一条数据以及这两条数据中间的每一条数据，这样就可以获取到每页的数据了，如果设置每页有5条数据的话，那么第一页的数据应该是获取下标大约等于0——小于5的数据，第二页就应该是获取下标大于等于5的数据——到下标小于10的数据，第三页就应该是获取下标大于等于10——下标小于15的数据，依次类推就可以获取到每页相应条数的数据
        return index >= start && index < end
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.top {
  .el-input {
    width: 250px;
  }
  .el-button {
    margin-left: 10px;
  }
  .add {
    margin-left: 490px;
    
  }
}
.bottom {
  margin-top: 20px;
}
.elform {
  text-align: right;
}
</style>